<template>
	<div>
		<div class="line"></div>
		<div class="hot-box">
			<div class="title">
				<p>本周热门榜单</p>
				<a href="">全部榜单></a>
			</div>
			<div class="hot-con">
				<ul>
					<li v-for="item of recommendList" :key="item.id">
						<img :src="item.imgUrl" />
						<p class="hot-title">{{item.title}}</p>
						<p class="hot-price"><span><label>￥</label>{{item.price}}</span>起</p>
					</li>
				</ul>
			</div>
		</div>
		<!--热门榜单结束-->
	</div>
</template>

<script>
	export default{
		name : 'IndexRecommend',
		props:{
			recommendList:Array
		}
	}
</script>

<style scoped>
	.line{
		height: .25rem;
		width: 100%;
		background-color: #eee;
	}
	.hot-box{
		width: 92%;
		margin: 0px auto;
	}
	.hot-box .title{
		display:flex;
		margin: .2rem 0 .3rem;
	}
	.hot-box .title p{
		color: #333;
		font-size: .3rem;
		flex: 1;
		background: url('http://img1.qunarzz.com/piao/fusion/1711/16/bfbb9874e8f11402.png') no-repeat left;
		background-size: .3rem;
		padding-left: .4rem;
	}
	.hot-box .title a{
		font-size: .2rem;
		color: #333;
	}
	.hot-box .hot-con{
		width: 100%;
		position: relative;
		overflow-x: scroll;
	}
	.hot-box ul{
		width: 500%;
		box-sizing: border-box;
	}
	.hot-box ul li{
		width: 1.95rem;
		margin-right: .1rem;
		display: inline-block;
		float: left;
		margin-bottom: .25rem;
	}
	.hot-box ul li img{
		width: 100%;
	}
	.hot-box ul li .hot-title{
		font-size: .15rem;
		color: #212121;
		line-height: .44rem;
		overflow: hidden;
		white-space: nowrap;
        text-overflow: ellipsis;
		margin-top: .1rem;
		text-align: center;
	}
	.hot-box ul li .hot-price{
		color: #616161;
		font-size: .24rem;
		line-height: .36rem;
		text-align: center;
	}
	.hot-box ul li .hot-price span{
		color: #ff8300;
	}
</style>
